@layer element{.element-ebook-cover{--depth:.1;--ebook-font-size:clamp(24px,13.3333px + 1.7778vw,40px);block-size:100%;font-size:var(--ebook-font-size);inline-size:100%}.element-ebook-cover :is(.cover,.spine,.spine-text),.element-ebook-cover.scene{block-size:100%;inline-size:100%}.element-ebook-cover :is(.book,.cover,.spine){position:absolute}.element-ebook-cover.scene{align-items:center;display:flex;justify-content:center;perspective:3000px;position:relative}.element-ebook-cover.scene .book{aspect-ratio:.70710678;block-size:100%;display:block;max-block-size:100%;max-inline-size:100%;transform:rotateY(0);transform-origin:center;transform-style:preserve-3d;transition:all .6s ease}:is(.element-ebook-cover.scene .book) .cover{border-radius:0 .25em .25em 0;overflow:hidden;transform:translateZ(calc(var(--ebook-depth)/2))}:is(:is(.element-ebook-cover.scene .book) .cover):before{background:#fff3;content:"";inset-block:0;inset-inline-start:4%;position:absolute;width:.25%}:is(:is(.element-ebook-cover.scene .book) .cover):after{background:#0003;content:"";inset-block:0;inset-inline-start:3%;position:absolute;width:.75%}:is(.element-ebook-cover.scene .book) .spine{background:#f2f2f2;inline-size:var(--ebook-depth);transform:rotateY(-90deg) translateZ(calc(var(--ebook-depth)/2))}:is(:is(.element-ebook-cover.scene .book) .spine) .spine-text{align-items:center;box-sizing:border-box;color:#2e2e2e;display:flex;font-size:var(--ebook-font-size);gap:1em;justify-content:space-between;margin:0;padding-inline:.5em;transform:rotate(180deg);writing-mode:vertical-rl}:is(:is(:is(.element-ebook-cover.scene .book) .spine) .spine-text) span{white-space:nowrap}:is(:is(:is(.element-ebook-cover.scene .book) .spine) .spine-text) .title{display:inline-block;font-family:GTAmericaCondensed,sans-serif;font-weight:600;overflow:hidden;text-overflow:ellipsis}:is(:is(:is(.element-ebook-cover.scene .book) .spine) .spine-text) .type{font-family:GTAmericaCondensed,sans-serif;font-weight:700}.element-ebook-cover.perspective .book{transform:rotateY(30deg)}:has(>.element-ebook-cover){align-items:center;container-type:size;display:flex;justify-content:center}@container (max-height: 800px){.element-ebook-cover{--ebook-depth:calc(800px*var(--depth));--ebook-font-size:34px}}@container (max-height: 750px){.element-ebook-cover{--ebook-depth:calc(750px*var(--depth));--ebook-font-size:32px}}@container (max-height: 700px){.element-ebook-cover{--ebook-depth:calc(700px*var(--depth));--ebook-font-size:30px}}@container (max-height: 650px){.element-ebook-cover{--ebook-depth:calc(650px*var(--depth));--ebook-font-size:28px}}@container (max-height: 600px){.element-ebook-cover{--ebook-depth:calc(600px*var(--depth));--ebook-font-size:26px}}@container (max-height: 550px){.element-ebook-cover{--ebook-depth:calc(550px*var(--depth));--ebook-font-size:24px}}@container (max-height: 500px){.element-ebook-cover{--ebook-depth:calc(500px*var(--depth));--ebook-font-size:22px}}@container (max-height: 450px){.element-ebook-cover{--ebook-depth:calc(450px*var(--depth));--ebook-font-size:20px}}@container (max-height: 400px){.element-ebook-cover{--ebook-depth:calc(400px*var(--depth));--ebook-font-size:18px}}@container (max-height: 350px){.element-ebook-cover{--ebook-depth:calc(350px*var(--depth));--ebook-font-size:16px}}@container (max-height: 300px){.element-ebook-cover{--ebook-depth:calc(300px*var(--depth));--ebook-font-size:14px}}@container (max-height: 250px){.element-ebook-cover{--ebook-depth:calc(250px*var(--depth));--ebook-font-size:12px}}@container (max-height: 200px){.element-ebook-cover{--ebook-depth:calc(200px*var(--depth));--ebook-font-size:10px}}@container (max-height: 150px){.element-ebook-cover{--ebook-depth:calc(150px*var(--depth));--ebook-font-size:8px}}@container (max-height: 100px){.element-ebook-cover{--ebook-depth:calc(100px*var(--depth));--ebook-font-size:6px}}@container (max-height: 50px){.element-ebook-cover{--ebook-depth:calc(50px*var(--depth));--ebook-font-size:4px}}@container (max-height: 799px){.element-ebook-cover img{content:var(--book-cover-image-799)}}@container (max-height: 699px){.element-ebook-cover img{content:var(--book-cover-image-699)}}@container (max-height: 599px){.element-ebook-cover img{content:var(--book-cover-image-599)}}@container (max-height: 499px){.element-ebook-cover img{content:var(--book-cover-image-499)}}@container (max-height: 399px){.element-ebook-cover img{content:var(--book-cover-image-399)}}@container (max-height: 299px){.element-ebook-cover img{content:var(--book-cover-image-299)}}@container (max-height: 199px){.element-ebook-cover img{content:var(--book-cover-image-199)}}@container (max-height: 99px){.element-ebook-cover img{content:var(--book-cover-image-99)}}@media (resolution >= 2dppx){@container (max-height: 799px){.element-ebook-cover img{content:var(--book-cover-image-799-2x)}}@container (max-height: 699px){.element-ebook-cover img{content:var(--book-cover-image-699-2x)}}@container (max-height: 599px){.element-ebook-cover img{content:var(--book-cover-image-599-2x)}}@container (max-height: 499px){.element-ebook-cover img{content:var(--book-cover-image-499-2x)}}@container (max-height: 399px){.element-ebook-cover img{content:var(--book-cover-image-399-2x)}}@container (max-height: 299px){.element-ebook-cover img{content:var(--book-cover-image-299-2x)}}@container (max-height: 199px){.element-ebook-cover img{content:var(--book-cover-image-199-2x)}}@container (max-height: 99px){.element-ebook-cover img{content:var(--book-cover-image-99-2x)}}}}